<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识MVVM分层思想</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
    1.MVVM是什么
        M:Model(模型/数据)
        V:View (视图)
        VM:ViewModel(视图模型):VM是MVVM中的核心部分.(它起到一个核心非常重要的作用)
        MVVM是目前前端开发领域当中非常流行的开发思想(一种架构模式)
        目前前端的大部分主流框架都实现了MVVM思想,例如Vue,Rect等等...
    2.Vue框架遵循MVVM吗?
        虽然没有完全遵循 MVVM模型,但是Vue的设计也受到了它的启发
        Vue框架基本上是符合MVVM思想的
    3.MVVM模型当中倡导了Model和View进行分离，为什么要分离
        假如Model和View不分离,使用最原始的原生的javascript代码写项目:
            如果数据发生任意的改动,接下来我们需要编写大篇幅的操作DOM元素的JS代码

        将Model和View分离之后,出现了一个VM核心,这个VM把所有的脏活累活全部都干了
        也就是说,当Model发生了改变之后,VM会自动的去更新View,当View发生改动之后
        VM就会自动取更新Model,我们再也不需要编写操作DOM的JS代码了,开发效率提高了很多
-->
<!--准备容器-->
<!--View V-->
<div id="app">
    姓名:<input type="text" v-model="name"/>
</div>

<!--vue程序-->
<script>
    //VIewModel VM
    const vm = new Vue({
        el : '#app',
        //Model M
        data : {
            name : 'zhangsan'
        }
    })


</script>

</body>
</html>